<aside class="col-md-4 gal-left" id="sidebar">
    <!-- 搜索框 -->
    <aside id="sidebar-search">
        <div class="search hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <form class="form-inline clearfix" id="search-form" method="get" action="/search/">
                <input type="text" name="keyword" th:value="${keyword}" class="form-control" id="searchInput"
                       placeholder="搜索">
                <button class="btn btn-danger btn-gal" type="submit">
                    <i class="fa fa-search"></i>
                </button>
            </form>
        </div>
    </aside>
    <aside id="sidebar-author">
        <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000">
            <div class="panel-heading" style="text-align: center">
                <i class="fa fa-quote-left"></i>
                [[${GLOBAL.BLOG_AUTHOR}]]
                <i class="fa fa-quote-right"></i>
            </div>
            <div class="author-panel text-center">
                <img th:src="${GLOBAL.BLOG_AVATAR}" width="140" height="140" alt="个人头像" class="author-image">
                <p class="author-email" th:text="${GLOBAL.AUTHOR_DESCRIPTION}"></p>
            </div>
        </div>
    </aside>

    <aside id="sidebar-recent_comments">
        <div class="panel panel-gal recent hidden-xs aos-init aos-animate" data-aos="fade-up" data-aos-duration="2000">
            <div class="panel-heading">
                <i class="fa fa-comments"></i>
                最新评论
                <i class="fa fa-times-circle panel-remove"></i>
                <i class="fa fa-chevron-circle-up panel-toggle"></i>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item" th:each="item:${latestComments}">
                    <span class="author-avatar"><img class="avatar" width="40" height="40" th:src="'https://secure.gravatar.com/avatar/'+${item.emailMd5}"></span>
                    <a th:href="@{/{url}.html(url=${item.article.url})}" class="hint--left hint--rounded" th:data-hint2="${item.article.title}">
                        <div class="comment-log"><p th:text="${item.content}"></p></div>
                    </a>
                </li>
            </ul>
        </div>
    </aside>

    <aside id="sidebar-rand-posts">
        <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <div class="panel-heading">
                <i class="fa fa-refresh"></i>
                推荐阅读
                <i class="fa fa-times-circle panel-remove"></i>
                <i class="fa fa-chevron-circle-up panel-toggle"></i>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item" th:each="item:${randomArticles}">
                <span class="post-title">
                    <a th:href="@{/{url}.html(url=${item.url})}" th:title="${item.title}" th:text="${item.title}"></a>
                </span>
                <span class="badge">[[${item.visits}]] ℃</span>
                </li>
            </ul>
        </div>
    </aside>

    <aside th:if="${hotArticles}" id="sidebar-hot-posts">
        <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <div class="panel-heading">
                <i class="fa fa-fire"></i>
                热门文章
                <i class="fa fa-times-circle panel-remove"></i>
                <i class="fa fa-chevron-circle-up panel-toggle"></i>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item" th:each="item:${hotArticles}">
                <span class="post-title">
                    <a th:href="@{/{url}.html(url=${item.url})}" th:text="${item.title}"></a>
                </span>
                <span class="badge">[[${item.visits}]] ℃</span>
                </li>

            </ul>
        </div>
    </aside>

    <aside th:if="${hotTags}" id="gal-sets">
        <div class="panel panel-gal hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <ul class="nav nav-pills pills-gal">
                <li>
                    <a href="#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a>
                </li>
                <li>
                    <a href="#sidebar-friend-links" data-toggle="tab"
                       id="friend-links-tab">友情链接</a>
                </li>
                <li>
                    <a href="#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags">
                    <a th:each="item:${hotTags}" class="tag-cloud-link" th:href="@{/tag/{url}/(url=${item.url})}" th:text="${item.name}"></a>
                </div>
                <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links">
                    <li th:each="item:${friendLinks}">
                        <a th:href="${item.url}" target="_blank" th:text="${item.name}"></a>
                    </li>
                </div>
                <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links">
                    <li th:each="item:${personalLinks}">
                        <a th:href="${item.url}" target="_blank" th:text="${item.name}"></a>
                    </li>
                </div>
            </div>
        </div>
    </aside>
</aside>
